<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
  <meta charset="utf-8">
  <!--
	<link rel="stylesheet" href="js/jquery.mobile/jquery.mobile-1.4.5.min.css">
	<script src="js/jquery-2.1.3.min.js"></script>
	<script src="js/jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
	-->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
	<div data-role="page" id="pageone">
	  <div data-role="header" data-position="fixed">
  		<a href="#" data-role="button">首页</a>
	    <h1>欢迎访问我的主页</h1>
  		<a href="#" data-role="button">搜索</a>

		  <div data-role="navbar">
		    <ul>
		      <li><a href="#anylink" class="ui-btn-active  ui-state-persist">首页</a></li>
		      <li><a href="#anylink">页面二</a></li>
		      <li><a href="#anylink">搜索</a></li>
		    </ul>
		  </div>
	  </div>

	  <div class="content" data-role="content">
	    <p>Welcome!</p>
	    <div><a href="#pagetwo" data-role="button">转到页面二</a></div>
	    <div><a href="#pagethree" data-rel="dialog" data-role="button">弹出页面三</a></div>
	    <div><a class="gotopagetow" href="#pagetwo" data-transition="slide" data-role="button">滑动转到页面二</a></div>
	    <div><a href="#pagetwo" data-transition="flip" data-role="button">从后向前翻动到页面二</a></div>
	    <div><a href="#pagetwo" data-transition="flow" data-role="button">抛出当前页面，引入页面二</a></div>
	    <div><a href="#pagetwo" data-transition="pop" data-role="button">像弹出窗口那样转到页面二</a></div>
	    <div data-role="controlgroup" data-type="horizontal">
	    	<p>水平分组：</p>
		    <a href="#" data-role="button" data-icon="home">按钮 1</a>
		    <a href="#" data-role="button">按钮 2</a>
		    <a href="#" data-role="button">按钮 3</a>
	  	</div>
    
	    <div data-role="controlgroup" data-type="vertical">
		    <p>垂直分组（默认）：</p>
		    <a href="#" data-role="button">按钮 1</a>
		    <a href="#" data-role="button">按钮 2</a>
		    <a href="#" data-role="button">按钮 3</a>
		    <a href="#" data-role="button">按钮 1</a>
		    <a href="#" data-role="button">按钮 2</a>
		    <a href="#" data-role="button">按钮 3</a>
		    <a href="#" data-role="button">按钮 1</a>
		    <a href="#" data-role="button">按钮 2</a>
		    <a href="#" data-role="button">按钮 3</a>
		    <a href="#" data-role="button">按钮 1</a>
		    <a href="#" data-role="button">按钮 2</a>
		    <a href="#" data-role="button">按钮 3</a>
		    <a href="#" data-role="button">按钮 1</a>
		    <a href="#" data-role="button">按钮 2</a>
		    <a href="#" data-role="button">按钮 3</a>
	    </div>
	  </div>

	  <div data-role="footer" data-position="fixed">
	    <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
	    <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
	  </div>
	</div> 

	<div data-role="page" id="pagetwo">
	  <div data-role="header" data-position="fixed">
	    <h1>欢迎访问我的主页</h1>
	  </div>

	  <div data-role="content">
	    <p>Goodbye!</p>
	    <a href="#pageone" data-role="button">转到页面一</a>
  		<a href="#" data-role="button" data-rel="back">后退</a>
	  </div>

	  <div data-role="footer" data-position="fixed">
	  <h1>页脚文本</h1>
	  </div>
	</div> 

	<div data-role="page" id="pagethree">
	  <div data-role="header" data-position="fixed">
	    <h1>欢迎访问我的主页</h1>
	  </div>

	  <div data-role="content">
	    <p>Goodbye!</p>
	    <a href="#pageone" data-role="button">转到页面一</a>
	  </div>

	  <div data-role="footer" data-position="fixed">
	  <h1>页脚文本</h1>
	  </div>
	</div>
	<script>
		$(".content").on("swipe",function(){
		  $('.gotopagetow').trigger('click');
		});
	</script>
</body>
</html>
